<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="180rpx">
			<u-form-item label="收货人" prop="name">
				<u-input v-model="form.name" placeholder="请输入收货人姓名" />
			</u-form-item>
			<u-form-item label="手机号码">
				<u-input v-model="form.intro" placeholder="请输入手机号码" />
			</u-form-item>
			<u-form-item label="收货地址">
				<u-input height="80rpx"  v-model="form.address" type="textarea" auto-height placeholder="请输入收货地址"> </u-input>
				<u-button @click="chooseMap" slot="right" type="success" size="mini">选择地址</u-button>
			</u-form-item>
			<u-form-item label="门牌号"><u-input v-model="form.doorNumber" placeholder="请输入门牌号" /></u-form-item>
		</u-form>

		<view class="addBtn" @click="submit">
			<view class="bnts">保存地址</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: "",
					phone: "",
					address: "",
					doorNumber: "",
				},
				
				rules: {
					name: [{required: true,message: '请输入收货人',trigger: ['change','blur'],}],
				}
				
				
			};
		},
		
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		
		methods: {
			
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},	
			
			chooseMap() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.form.address = res.address;
					},
					complete(res) {
						console.log(res);
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {padding: 32rpx;}
	.addBtn{
	    position: fixed;width: 100%;bottom: 0;left: 0;text-align: center;background-color: #07c601;color: #fff;z-index: 999;
		.bnts{ height: 96rpx;line-height: 96rpx;font-size: 30rpx;}
	}
	
	@supports (padding-bottom: constant(safe-area-inset-bottom)) or (padding-bottom: env(safe-area-inset-bottom)){
		.addBtn{padding-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));padding-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));}
	}
	
	
</style>